<template>
	<view class="comment flex-column">
		<view class="comment-wrap">
			<view class="comment-title flex-row">
				<text>服务评价</text>
				<text class="time">{{ message?.createTime }}</text>
			</view>
			<view class="comment-content">
				<view class="flex-row" style="justify-content: flex-start;">
					<text class="label">服务满意度：</text>
					<view v-if="comment?.service == 0" class="item flex-row">
						<image class="icon" src="@/static/img/svg/unsatisfied.svg" />
						<view class="text">不满意</view>
					</view>
					<view v-if="comment?.service == 1" class="item flex-row">
						<image class="icon" src="@/static/img/svg/normal.svg" />
						<view class="text">一般</view>
					</view>
					<view v-if="comment?.service == 2" class="item flex-row">
						<image class="icon" src="@/static/img/svg/satisfied.svg" />
						<view class="text">满意</view>
					</view>
				</view>
				<view class="suggestion">
					<text class="label">反馈建议：</text>
					<text class="text">{{ comment?.data }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({
	config: { type: Object, default: () => { } },
	message: { type: Object, default: () => { } },
})
const comment = computed(() => {
	const content = props.message?.content || '{}'
	return typeof content === 'string' ? JSON.parse(content) : content
})
</script>

<style lang="scss" scoped>
.comment {
	padding: 20rpx 0;

	&-wrap {
		width: 75%;
		background: #fff;
		border: 2rpx solid #eee;
	}

	.item {
		border-radius: 60rpx;
		margin: 10rpx 40rpx 12rpx 0;
		border: 2rpx solid #F5C33A;
		position: relative;

		.icon {
			@include fullsize(48rpx);
			position: absolute;
			top: -4rpx;
			left: -4rpx;
		}

		.text {
			height: 40rpx;
			color: #F5B400;
			line-height: 40rpx;
			font-size: 24rpx;
			padding: 0 20rpx 0 60rpx;
		}
	}

	&-title {
		height: 80rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		border-bottom: 2rpx dashed #eee;

		.time {
			color: #888;
		}
	}

	&-content {
		padding: 30rpx;

		.label {
			font-size: 26rpx;
		}

		.suggestion {
			color: #333;
			margin-top: 20rpx;
			line-height: 40rpx;

			.text {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
}
</style>